<template lang="html">
<div class="info">
  <div class="singer-info">
     <div class="detail" v-for="item in singerInfo.songlist">
        <div class="singer-icon"><img :src="item.pic_small" :alt="singerInfo.songlist[0].name"></div>
        <div class="info">
          <p class="desc">
            <span>{{item.title}}</span>
          </p>
          <p class="live-style"></p>
          <p class="live-time">
            <span class="time">{{item.author.slice(0,3) }}</span>
          </p>
       </div>
       <!-- <router-link :to="{name:'MusicPlayer',params:{songid:songid}}" tag="div" class="play">
          <img src="../../../assets/images/icon-play2.png">
       </router-link> -->
       <div class="play">
         <img src="../../../assets/images/icon-play2.png">
       </div>
       <div class="go">
         <img src="../../../assets/images/icon-manage.png">
       </div>
     </div>
   <div class="hr"></div>
 </div>
</div>
</template>

<script>
export default {
  name:"LoveSong",
  data(){
    return{
      singerInfo:{
        songlist:[]
      }
    }
  },
  created(){
    const SingerUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid=88012233&limits=3&use_cluster=1&order=2"
    this.$axios.get(SingerUrl)
    .then(res => {
      // console.log(res);
      this.singerInfo = res.data
    })
    .catch(error => {
      console.log(error);
    })
  }

}
</script>

<style scoped>
.singer-info{
  margin-top: 0.4rem;
	margin-left: 0.2rem;
	margin-bottom: 0.18rem;
  background-color: white;
  border-top:3px solid lightgray;
}
.singer-info .singer-icon{
	width: 1.8rem;
	height: 1.8rem;
}
.singer-info .singer-icon img{
	width: 100%;
	height: 100%;
  margin-top: 0.04rem;
}
.singer-info .info{
	font-size: 0.24rem;
	padding-top: 0.3rem;
	padding-left: 0.15rem;
}
.singer-info .info .live-style{
	margin-top: 0.2rem;
	margin-bottom: 0.38rem;
	height:0.24rem;
}
.singer-info .hr{
	width: 5.28rem;
	height: 1px;
	background-color:#ccc;
	margin-top: 0.14rem;
	margin-left: 1.72rem;
}
.detail{
	overflow: hidden;
	position: relative;
}
.detail>div{
	float: left;
}
.detail  .play{
	position: absolute;
	width: 0.4rem;
	height: 0.4rem;
	top:0.76rem;
	right: 2rem;
}
.detail .play img{
	width: 100%;
	height: 100%
}
.detail  .go{
	position: absolute;
	width: 0.5rem;
	height: 0.32rem;
	top:0.76rem;
	right: 0.6rem;
}
.detail .go img{
	width: 100%;
	height:100%
}
 .info .desc span{
  margin-left: 0.2rem;
   font-size: 14px;
}
.live-time span{
  margin-left: 0.2rem;
}

</style>
